<template>
    <div ref="main" style="width: 600px;height:400px;">
        131321
    </div>

</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';
import Api from './api'
let main = ref()
 var option = reactive(
  {
        title: {
          text: 'aaa'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: []
      }
 );
 var option2 = reactive(
  {
        xAxis: {
          data: []
        },
        yAxis: {},
        series: []
      }
 );
const draw=()=>{
  var myChart =  echarts.init(main.value);
   console.log('myChart=>',myChart);
     // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      // let option3 = {...option,...option2}
      let option3 = Object.assign(option,option2)
      console.log('33333',option3);
    myChart.setOption(option3);
}
onMounted(()=>{
    Api.getEchartInfo().then(res=>{
       option2 = res.data[0]
        console.log('res=>', option2);
        draw()
    })
   
})
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import Api from "./api";
let main = ref();
var option = reactive({
  title: {
    text: "web2523，我们在学习git，aaa，bbb",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
  },
  xAxis: {
    data: [],
  },
  yAxis: {},
  series: [],
});
var option2 = reactive({
  xAxis: {
    data: [],
  },
  yAxis: {},
  series: [],
});
const draw = () => {
  var myChart = echarts.init(main.value);
  console.log("myChart=>", myChart);
  // 指定图表的配置项和数据
  // 使用刚指定的配置项和数据显示图表。
  // let option3 = {...option,...option2}
  let option3 = Object.assign(option, option2);
  console.log("33333", option3);
  myChart.setOption(option3);
};
onMounted(() => {
  Api.getEchartInfo().then((res) => {
    option2 = res.data[0];
    console.log("res=>", option2);
    draw();
  });
});
</script>
<style scoped>

</style>
